<template>
  <apply-layout :current="2">
    <mt-button slot="right" @click="back">上一步</mt-button>
    <div class="form">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left" class="label required">最高学历毕业院校</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入最高学历毕业院校'}]"
            v-model="form.aac180"
            :disabled="Number(userInfo.personDataOrigin) === 1"
            ref="aac180"
            placeholder="请输入最高学历毕业院校"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">最高学历专业名称</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入最高学历所学专业名称'}]"
            v-model="form.expProfession"
            ref="expProfession"
            placeholder="请输入最高学历所学专业名称"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">最高学历专业类别</span>
          <xf-picker
            v-model="form.expAcc01g"
            ref="expAcc01g"
            search
            placeholder="请输入最高学历所学专业类别"
            :valid="[{required: true, msg: '请选择最高学历专业类别'}]"
            :list="profession"
            slot="right"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">手机号</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入手机号'}, {reg: $regex.phone, msg: '手机号格式不正确'}]"
            v-model="form.aae005"
            ref="aae005"
            placeholder="请输入手机号码"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">户籍行政划分</span>
          <xf-multi
            :name-val.sync="form.expResidenceZoning"
            ref="expResidenceZoning"
            slot="right"
            :list="cities"
            title="选择地区"
            :columns="3"
            placeholder="请选择工作地点行政划分"></xf-multi>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">户口所在地址</span>
          <xf-input
            slot="right"
            :valid="[{reg: /^.{0,50}$/, msg: '户口所在地址最多50个字符'}]"
            v-model="form.bab305"
            ref="bab305"
            placeholder="请输入户口所在地址"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">工作单位</span>
          <xf-input
            slot="right"
            :valid="[{reg: /^.{0,50}$/, msg: '工作单位最多50个字符'}]"
            v-model="form.expWorkCompany"
            ref="expWorkCompany"
            :disabled="Number(userInfo.personDataOrigin) === 1"
            placeholder="请输入工作单位名称"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">工作单位机构类型</span>
          <xf-picker
            v-model="form.expWorkOrg"
            ref="expWorkOrg"
            placeholder="请选择工作单位机构类型"
            :list="unitnature"
            slot="right"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">工作单位经济类型</span>
          <xf-picker
            v-model="form.expWorkEconomics"
            ref="expWorkEconomics"
            placeholder="请选择工作单位经济类型"
            :list="economic"
            slot="right"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">工作单位所属行业</span>
          <xf-picker
            v-model="form.expWorkIndustry"
            ref="expWorkIndustry"
            search
            placeholder="请选择工作单位所属行业"
            :list="industry"
            slot="right"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">工作职位（岗位）类型</span>
          <xf-picker
            v-model="form.expWorkPost"
            ref="expWorkPost"
            search
            placeholder="请选择工作职位（岗位）类型"
            :list="craft"
            slot="right"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">工作地点行政划分</span>
          <xf-multi
            :name-val.sync="form.expWorkZoning"
            ref="expWorkZoning"
            slot="right"
            :list="cities"
            title="选择地区"
            :columns="3"
            placeholder="请选择工作地点行政划分"></xf-multi>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">现居住地址</span>
          <xf-input
            slot="right"
            :valid="[{reg: /^.{0,50}$/, msg: '现居住地址最多50个字符'}]"
            v-model="form.aab301"
            ref="aab301"
            placeholder="请输入现居住地址"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">邮政编码</span>
          <xf-input
            slot="right"
            :valid="[{reg: /^.{0,10}$/, msg: '邮政编码格式不正确'}]"
            v-model="form.aae007"
            ref="aae007"
            placeholder="请输入邮政编码"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">电子邮箱</span>
          <xf-input
            slot="right"
            :valid="[{reg: 'email', msg: '电子邮箱格式不正确'}]"
            v-model="form.aae015"
            ref="aae015"
            placeholder="请输入电子邮箱"></xf-input>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    <div class="next" slot="footer">
      <mt-button size="large" type="primary" @click="onSubmit">下一步</mt-button>
    </div>
  </apply-layout>
</template>
<script>
  import ApplyLayout from './layout.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import {parse, echo, validate} from '../../../common/js/util'
  import {dics, getDics, getCities} from '../../../common/js/dictionaries'
  import XfMulti from '../../../components/xf-multi/xf-multi'
  import {mapGetters} from 'vuex'

  export default {
    components: {
      XfMulti,
      XfPicker,
      XfInput,
      ApplyLayout},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          aac180: '', // 最高学历毕业院校
          expProfession: '', // 最高学历专业名称
          expAcc01g: '', // 最高学历专业类别
          aae005: '', // 手机号
          expResidenceZoning: '', // 户籍行政划分
          bab305: '', // 户口所在地
          expWorkCompany: '', // 工作单位
          expWorkOrg: '', // 工作单位机构类型
          expWorkEconomics: '', // 工作单位经济类型
          expWorkIndustry: '', // 工作单位所属行业
          expWorkPost: '', // 岗位类型
          expWorkZoning: '', // 工作地点行政划分
          aab301: '', // 现居住地址
          aae007: '', // 邮编
          aae015: '' // 邮箱
        },
        canLeave: false,
        profession: [],
        cities: [],
        unitnature: [],
        economic: [],
        industry: [],
        craft: []
      }
    },
    methods: {
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          const form = Object.assign({}, this.temp, this.form)
          sessionStorage.setItem(STORAGE_TYPE.apply, JSON.stringify(form))
          this.$post('/admin/person/sapi/personal/records/perEntry/update/base/info', form, loading => { this.$message.loading(loading) }).then(res => {
            this.canLeave = true
            this.$router.replace({
              name: 'apply3',
              query: {id: res.data.personId}
            })
          })
        })
      },
      getDics() {
        getDics(dics.profession, dics.unitnature, dics.economic, dics.industry, dics.craft).then(res => {
          this.profession = res[0]
          this.unitnature = res[1]
          this.economic = res[2]
          this.industry = res[3]
          this.craft = res[4]
        })
        getCities().then(res => {
          this.cities = res
        })
      },
      back() {
        this.canLeave = true
        this.$router.replace('/apply-1')
      }
    },
    created() {
      this.form.aae005 = this.userInfo.aae005
      this.temp = parse(sessionStorage.getItem(STORAGE_TYPE.apply))
      if (!this.temp) {
        this.canLeave = true
        this.$router.replace({name: 'apply1'})
        return
      }
      echo(this.form, this.temp)
      this.getDics()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
